Angular অ্যাপ্লিকেশন উন্নয়ন করতে গিয়ে টেস্টিং একটি গুরুত্বপূর্ণ অংশ। Angular-এ টেস্টিং মূলত দুটি ধরনের টেস্ট কাভারেজ দেয়: একক টেস্ট (Unit Testing) এবং ইন্টিগ্রেশন টেস্ট (Integration Testing)। Angular টেস্টিং করার জন্য Karma এবং Jasmine ব্যবহার করা হয়, যেগুলি Angular CLI-র মাধ্যমে ইন্টিগ্রেটেড থাকে।

Angular টেস্টিংয়ের উপাদান

1. Jasmine: এটি একটি বিখ্যাত টেস্টিং ফ্রেমওয়ার্ক যা অ্যাসার্ট (assertion) এবং স্পাই (spy) ফিচার দিয়ে টেস্টিং সহজ করে তোলে।
2. Karma: এটি একটি টেস্ট রানার যা ব্রাউজারে টেস্ট চালানোর কাজ করে। Karma-কে Angular CLI দ্বারা কনফিগার করা হয়।
3. TestBed: Angular-এর টেস্টিং পরিবেশ তৈরি করতে TestBed ব্যবহার করা হয়, যা Angular ডিপেন্ডেন্সি ইনজেকশনের সাথে ইন্টারঅ্যাক্ট করার জন্য ব্যবহৃত হয়।

Angular টেস্টিং সেটআপ

Angular অ্যাপ্লিকেশন তৈরির পর, আপনি সহজেই টেস্টিং করতে পারেন, কারণ Angular CLI ডিফল্টভাবে Jasmine, Karma, এবং অন্যান্য টেস্টিং টুলস ইন্টিগ্রেট করে দেয়।

টেস্টিং সেটআপ কনফিগারেশন:

• Karma এবং Jasmine সাধারণত karma.conf.js ফাইল এবং tsconfig.spec.json ফাইলের মাধ্যমে কনফিগার করা থাকে।
• Jasmine টেস্ট ফ্রেমওয়ার্কটি *.spec.ts ফাইলগুলিতে লিখতে হয়।

1. Unit Testing with Jasmine

Unit Testing হলো এমন একটি পদ্ধতি যেখানে শুধুমাত্র একটি ইউনিট (যেমন একটি ফাংশন বা কম্পোনেন্ট) টেস্ট করা হয়। এই টেস্টে কম্পোনেন্ট বা সার্ভিসের ইনপুট এবং আউটপুট চেক করা হয়।

উদাহরণ: কম্পোনেন্ট টেস্ট

ধরা যাক আমাদের একটি CalculatorComponent আছে, যেটি দুটি সংখ্যার যোগফল বের করে।

কম্পোনেন্ট (calculator.component.ts):

import { Component } from '@angular/core';

@Component({
  selector: 'app-calculator',
  templateUrl: './calculator.component.html'
})
export class CalculatorComponent {
  add(a: number, b: number): number {
    return a + b;
  }
}

টেস্ট ফাইল (calculator.component.spec.ts):

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { CalculatorComponent } from './calculator.component';

describe('CalculatorComponent', () => {
  let component: CalculatorComponent;
  let fixture: ComponentFixture<CalculatorComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [CalculatorComponent]
    });
    fixture = TestBed.createComponent(CalculatorComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should add two numbers correctly', () => {
    expect(component.add(2, 3)).toBe(5); // অ্যাসার্ট: 2 + 3 এর রেজাল্ট 5 হওয়া উচিত
  });
});

ব্যাখ্যা:

• beforeEach ব্লকটি টেস্ট চালানোর আগে কম্পোনেন্টের ইনস্ট্যান্স তৈরি করে এবং সঠিক কনফিগারেশন নিশ্চিত করে।
• it() ব্লকে টেস্টের আসল চেক করা হয়। এখানে component.add(2, 3) কল করে তার আউটপুটের সাথে ৫ এর তুলনা করা হয়।
• expect() ফাংশনটি ব্যবহারকারীর দেয়া আউটপুটের সাথে টেস্টের প্রেডিকশন চেক করে।

2. স্পাই (Spies)

Angular টেস্টিং-এ স্পাই ব্যবহার করা হয় যাতে আমরা কোন ফাংশন বা মেথডের কল, তার আর্গুমেন্ট, অথবা তার আউটপুট ট্র্যাক করতে পারি। এটি বিশেষ করে সার্ভিসের মক (mocking) করতে সাহায্য করে।

স্পাই ব্যবহার উদাহরণ:

import { Component } from '@angular/core';
import { CalculatorComponent } from './calculator.component';

describe('CalculatorComponent', () => {
  let component: CalculatorComponent;
  let spy: jasmine.Spy;

  beforeEach(() => {
    component = new CalculatorComponent();
    spy = spyOn(component, 'add');  // 'add' মেথডে স্পাই করা হচ্ছে
  });

  it('should call add method', () => {
    component.add(2, 3);
    expect(spy).toHaveBeenCalled();  // স্পাই চেক করছে যে 'add' মেথড কল হয়েছে কিনা
  });
});

এখানে:

• spyOn() মেথডটি দিয়ে add() মেথডে স্পাই করা হয়েছে।
• expect(spy).toHaveBeenCalled() দিয়ে চেক করা হচ্ছে যে, add() মেথডটি কল হয়েছে কিনা।

3. ডিপেন্ডেন্সি ইনজেকশন এবং মক সার্ভিস

কখনো কখনো আপনার টেস্টের মধ্যে বাইরের সার্ভিস বা API কলের পরিবর্তে মক সার্ভিস ব্যবহার করতে হতে পারে। এতে করে আপনি সঠিক ডেটার পরিবর্তে ফেক ডেটা ব্যবহার করতে পারেন।

উদাহরণ: মক সার্ভিস টেস্টিং

সার্ভিস (data.service.ts):

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  fetchData() {
    return 'Real data from API';
  }
}

কম্পোনেন্ট (data.component.ts):

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-data',
  templateUrl: './data.component.html'
})
export class DataComponent {
  data: string;

  constructor(private dataService: DataService) {}

  loadData() {
    this.data = this.dataService.fetchData();
  }
}

টেস্ট ফাইল (data.component.spec.ts):

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { DataComponent } from './data.component';
import { DataService } from './data.service';
import { of } from 'rxjs';

class MockDataService {
  fetchData() {
    return of('Mocked data');
  }
}

describe('DataComponent', () => {
  let component: DataComponent;
  let fixture: ComponentFixture<DataComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [DataComponent],
      providers: [
        { provide: DataService, useClass: MockDataService }  // মক সার্ভিস ব্যবহার
      ]
    });
    fixture = TestBed.createComponent(DataComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should load mocked data', () => {
    component.loadData();
    expect(component.data).toBe('Mocked data');  // মক ডেটা চেক করা
  });
});

এখানে:

• MockDataService তৈরি করা হয়েছে, যা মূল DataService-এর পরিবর্তে মক ডেটা প্রদান করে।
• TestBed.configureTestingModule() এর মধ্যে DataService কে মক সার্ভিসের সাথে রিপ্লেস করা হয়েছে।

সারাংশ

Angular টেস্টিং আপনার অ্যাপ্লিকেশনকে বিশ্বস্ত, স্টেবল এবং ট্রাবল-ফ্রি রাখতে সহায়ক। Jasmine এবং Karma ব্যবহার করে আপনি সহজেই কম্পোনেন্ট, সার্ভিস এবং অন্যান্য লজিক টেস্ট করতে পারেন। Angular-এ টেস্টিং অন্তর্ভুক্ত করে, আপনি সহজেই উন্নত কোড কভারেজ এবং ত্রুটি শনাক্তকরণের মাধ্যমে অ্যাপ্লিকেশনটির স্থায়িত্ব বাড়াতে পারেন।

Angular কম্পোনেন্টের ইউনিট টেস্টিং হল Angular অ্যাপ্লিকেশনের একটি গুরুত্বপূর্ণ অংশ। এর মাধ্যমে আমরা একটি কম্পোনেন্টের কার্যকারিতা যাচাই করতে পারি, যেমন: কম্পোনেন্টের UI, ডেটা বাইন্ডিং, ইভেন্ট হ্যান্ডলিং এবং অন্যান্য কার্যকলাপ। Angular টেস্টিং সাধারণত Jasmine এবং Karma ব্যবহার করে করা হয়। Jasmine একটি টেস্ট ফ্রেমওয়ার্ক এবং Karma একটি টেস্ট রানার।

কম্পোনেন্ট টেস্টিং-এর উদ্দেশ্য

• এলার্ট, মেসেজ এবং UI ইন্টারঅ্যাকশন পরীক্ষা করা।
• ডেটা বাইন্ডিং এবং ইভেন্ট ট্রিগার করা।
• কম্পোনেন্টের মেথড এবং লজিক যাচাই করা।
• ডিপেন্ডেন্সি ইনজেকশনের মাধ্যমে ডেটার ইনপুট এবং আউটপুট পরীক্ষা করা।

Angular কম্পোনেন্টের টেস্টিং পরিবেশ

Angular CLI দ্বারা টেস্টিং পরিবেশ স্বয়ংক্রিয়ভাবে কনফিগার করা থাকে। সাধারণত কম্পোনেন্ট টেস্ট করার জন্য দুইটি মূল টুল ব্যবহার হয়:

• Jasmine: টেস্ট লিখার জন্য একটি বিখ্যাত টেস্টিং ফ্রেমওয়ার্ক।
• Karma: টেস্ট রান করার জন্য একটি টেস্ট রানার যা Jasmine এর সাথে সংযুক্ত থাকে।

কম্পোনেন্টের ইউনিট টেস্টিং করতে যা যা করতে হবে:

1. কোম্পোনেন্টের টেস্ট ফাইল তৈরি: সাধারণত Angular কম্পোনেন্টের সাথে একটি টেস্ট ফাইল স্বয়ংক্রিয়ভাবে তৈরি হয় যার এক্সটেনশন .spec.ts হয়।
2. TestBed ব্যবহার: Angular টেস্টিং পরিবেশে কম্পোনেন্ট এবং তার ডিপেন্ডেন্সি ইনজেকশন সেটআপ করতে TestBed ব্যবহার করা হয়।
3. কোম্পোনেন্টের মেথড, প্রপার্টি, UI এবং ইভেন্টের টেস্টিং: টেস্টিং এর মাধ্যমে কম্পোনেন্টের প্রপার্টি, মেথড, বাইন্ডিং এবং ইভেন্ট হ্যান্ডলিং পরীক্ষা করা হয়।

Angular কম্পোনেন্টের টেস্টিং উদাহরণ

ধরা যাক, আমাদের একটি সিম্পল GreetingComponent আছে যা একটি বাটন ক্লিক করার মাধ্যমে একটি বার্তা প্রদর্শন করে।

greeting.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-greeting',
  template: `<button (click)="sendGreeting()">Click me!</button>
             <p>{{ greetingMessage }}</p>`
})
export class GreetingComponent {
  greetingMessage: string;

  sendGreeting(): void {
    this.greetingMessage = 'Hello, Angular!';
  }
}

এখানে, sendGreeting() মেথডটি বাটন ক্লিক করার পর greetingMessage প্রপার্টিতে একটি স্ট্রিং অ্যাসাইন করবে যা টেমপ্লেটে প্রদর্শিত হবে।

টেস্ট ফাইল (greeting.component.spec.ts)

Angular CLI এর মাধ্যমে greeting.component.spec.ts ফাইলটি স্বয়ংক্রিয়ভাবে তৈরি হয়, যেখানে কম্পোনেন্টটির ইউনিট টেস্টিং করা হয়।

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { GreetingComponent } from './greeting.component';

describe('GreetingComponent', () => {
  let component: GreetingComponent;
  let fixture: ComponentFixture<GreetingComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ GreetingComponent ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(GreetingComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create the component', () => {
    expect(component).toBeTruthy();
  });

  it('should display greeting message after button click', () => {
    const button = fixture.debugElement.nativeElement.querySelector('button');
    button.click();
    fixture.detectChanges();
    
    const paragraph = fixture.debugElement.nativeElement.querySelector('p');
    expect(paragraph.textContent).toBe('Hello, Angular!');
  });
});

কোড বিশ্লেষণ:

• TestBed.configureTestingModule(): এটি Angular টেস্টিং পরিবেশ কনফিগার করে, যেখানে আমরা আমাদের কম্পোনেন্ট এবং অন্যান্য ডিপেন্ডেন্সি অন্তর্ভুক্ত করি।
• beforeEach(): এটি প্রতিটি টেস্টের আগে চলমান কোড যেখানে কম্পোনেন্টের ইন্সট্যান্স তৈরি করা হয় এবং টেম্পলেটের পরিবর্তনগুলি অ্যাপ্লাই করা হয়।
• fixture.detectChanges(): এটি টেম্পলেটের পরিবর্তনগুলি কম্পোনেন্টে রিফ্লেক্ট করার জন্য ব্যবহৃত হয়।
• fixture.debugElement.nativeElement.querySelector(): এটি DOM থেকে উপাদান নির্বাচিত করার জন্য ব্যবহৃত হয়, যেমন বাটন বা প্যারাগ্রাফ।
• button.click(): এটি বাটনে ক্লিক ইভেন্ট ট্রিগার করতে ব্যবহৃত হয়।
• expect(): এটি একটি assertion ফাংশন যা পরীক্ষার ফলাফল যাচাই করতে ব্যবহৃত হয়।

Angular কম্পোনেন্ট টেস্টিং: গুরুত্বপূর্ণ বিষয়াবলী

1. ডিপেন্ডেন্সি ইনজেকশন: যদি কম্পোনেন্টের ডিপেন্ডেন্সি থাকে (যেমন সার্ভিস), তবে TestBed.configureTestingModule() ব্যবহার করে ডিপেন্ডেন্সি ইনজেক্ট করতে হবে। আপনি মক সার্ভিস ব্যবহার করতে পারেন টেস্টিংয়ের জন্য।
2. Asynchronous টেস্টিং: যদি আপনার কম্পোনেন্ট অ্যাসিনক্রোনাস অপারেশন (যেমন API কল) করে, তাহলে async বা fakeAsync টেস্টিং ব্যবহার করে টেস্ট করতে হবে।
3. DOM ম্যানিপুলেশন: টেস্টের মাধ্যমে DOM উপাদান, ক্লাস এবং স্টাইল ম্যানিপুলেট করা যায় যাতে নিশ্চিত করা যায় যে কম্পোনেন্ট সঠিকভাবে UI আপডেট করছে।

সারাংশ

Angular কম্পোনেন্টের ইউনিট টেস্টিং একটি গুরুত্বপূর্ণ প্রক্রিয়া যা কোডের কার্যকারিতা, ইউজার ইন্টারফেস এবং ইভেন্ট হ্যান্ডলিং নিশ্চিত করতে সহায়তা করে। Jasmine এবং Karma এর মাধ্যমে Angular অ্যাপ্লিকেশনটির কম্পোনেন্ট, সার্ভিস এবং অন্যান্য উপাদান টেস্ট করা হয়, যা ডেভেলপমেন্টের সময় বাগ কমাতে এবং কোডের গুণগত মান বৃদ্ধি করতে সহায়ক।

Angular অ্যাপ্লিকেশন তৈরি করার সময়, সার্ভিসগুলি গুরুত্বপূর্ণ রোল পালন করে এবং সেগুলির টেস্টিং নিশ্চিত করতে হয়। ডিপেন্ডেন্সি ইনজেকশন (DI) ব্যবস্থার কারণে, সার্ভিসগুলি বিভিন্ন কম্পোনেন্টে ইনজেক্ট হয় এবং সঠিকভাবে টেস্ট করা প্রয়োজন। Angular-এ টেস্টিংয়ের জন্য আমরা সাধারণত Jasmine এবং Karma ব্যবহার করি, তবে আপনি টেস্টিংয়ের জন্য অন্য টুলও ব্যবহার করতে পারেন।

Angular-এ সার্ভিস টেস্ট করার সময়, যদি সার্ভিসটি অন্য সার্ভিস বা ডিপেন্ডেন্সি ব্যবহার করে, তাহলে DI ব্যবস্থার মাধ্যমে সেই ডিপেন্ডেন্সি মক (mock) বা স্টাব (stub) করে টেস্ট করা হয়।

সার্ভিস টেস্টিংয়ের মৌলিক ধারণা

1. Service Injection: যখন আমরা সার্ভিস টেস্ট করি, তখন এটি TestBed মাধ্যমে ইনজেক্ট করা হয়। Angular টেস্টিং পরিবেশে TestBed কনফিগারেশন আমাদের সার্ভিস এবং তার ডিপেন্ডেন্সি ইনজেক্ট করতে সাহায্য করে।
2. Mocking Dependencies: অনেক সময় সার্ভিসের ডিপেন্ডেন্সি গুলোকে মক (mock) করা হয়, বিশেষ করে যখন ডিপেন্ডেন্সি গুলো অ্যাসিনক্রোনাস অথবা থার্ড পার্টি লাইব্রেরি হয়।

Angular-এ ডিপেন্ডেন্সি ইনজেকশন সহ সার্ভিস টেস্টিং

ধরা যাক, আপনার একটি সার্ভিস DataService রয়েছে, যা একটি HTTP সার্ভিসের মাধ্যমে ডেটা ফেচ করে। এই সার্ভিসের টেস্ট করার সময়, আমরা HTTP রিকোয়েস্টগুলিকে মক করে এবং সার্ভিসটির কার্যকারিতা যাচাই করি।

1. DataService সার্ভিসের উদাহরণ

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor(private http: HttpClient) {}

  fetchData(): Observable<any> {
    return this.http.get('https://api.example.com/data');
  }
}

এই সার্ভিসটি HttpClient ব্যবহার করে ডেটা ফেচ করে এবং Observable হিসেবে রিটার্ন করে।

2. সার্ভিস টেস্টিং কনফিগারেশন

TestBed ব্যবহার করে DataService-এর টেস্ট কনফিগারেশন করা হয়। আমরা HttpClientTestingModule ব্যবহার করব, যা HTTP রিকোয়েস্ট মক করতে সহায়ক।

import { TestBed } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { DataService } from './data.service';

describe('DataService', () => {
  let service: DataService;
  let httpMock: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [DataService]
    });
    service = TestBed.inject(DataService);
    httpMock = TestBed.inject(HttpTestingController);
  });

  afterEach(() => {
    httpMock.verify();  // নিশ্চিত করে যে কোনো অনাকাঙ্ক্ষিত HTTP কল হয়নি
  });

  it('should be created', () => {
    expect(service).toBeTruthy();
  });

  it('should fetch data from the API', () => {
    const mockData = { name: 'John', age: 30 };

    service.fetchData().subscribe(data => {
      expect(data).toEqual(mockData);  // আসল ডেটার সাথে মক ডেটা তুলনা
    });

    const req = httpMock.expectOne('https://api.example.com/data');
    expect(req.request.method).toBe('GET');  // নিশ্চিত করা যে GET রিকোয়েস্ট হয়েছে
    req.flush(mockData);  // মক ডেটা পাঠানো
  });
});

3. টেস্ট কনফিগারেশন বিশ্লেষণ

1. TestBed Configuration: TestBed.configureTestingModule ব্যবহার করে আমরা আমাদের সার্ভিস এবং প্রয়োজনীয় মডিউলগুলি কনফিগার করি।
   • HttpClientTestingModule: এটি HttpClient-এর HTTP রিকোয়েস্টগুলিকে মক করে দেয়।
   • providers: সার্ভিসটি প Providers অ্যারে দ্বারা ইনজেক্ট করা হয়।
2. beforeEach(): প্রতিটি টেস্টের আগে, আমরা TestBed.inject() দিয়ে সার্ভিস এবং HTTP মক কন্ট্রোলারকে ইনজেক্ট করি।
3. afterEach(): টেস্টের পর, আমরা httpMock.verify() ব্যবহার করে নিশ্চিত করি যে কোনো অবাঞ্চিত HTTP রিকোয়েস্ট হয়নি।
4. Test Cases:
   • প্রথম টেস্টটি চেক করে যে সার্ভিসটি সঠিকভাবে তৈরি হয়েছে কি না।
   • দ্বিতীয় টেস্টটি fetchData() মেথডটি ঠিকমতো ডেটা ফেরত দিচ্ছে কিনা পরীক্ষা করে।
   • httpMock.expectOne() মাধ্যমে আমরা পরীক্ষা করি যে নির্দিষ্ট API URL-এ একটিই HTTP GET রিকোয়েস্ট হচ্ছে।
   • req.flush(mockData) মক ডেটা সার্ভিসে পাঠানোর জন্য ব্যবহৃত হয়।

মকিং ডিপেন্ডেন্সি

যখন আপনার সার্ভিসের কোনো নির্দিষ্ট ডিপেন্ডেন্সি থাকে, যেমন অন্য সার্ভিস বা মডিউল, তখন সেগুলিকে মক করা হয়। উদাহরণস্বরূপ, আপনি যদি সার্ভিসের ভেতরে AuthService বা LoggerService ইনজেক্ট করেন, তবে আপনি এই ডিপেন্ডেন্সিগুলোকে মক (mock) করে টেস্ট করতে পারেন।

import { AuthService } from './auth.service';

describe('DataService', () => {
  let service: DataService;
  let authServiceMock: jasmine.SpyObj<AuthService>;

  beforeEach(() => {
    authServiceMock = jasmine.createSpyObj('AuthService', ['isAuthenticated']);
    
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [
        DataService,
        { provide: AuthService, useValue: authServiceMock }  // AuthService মক করা
      ]
    });

    service = TestBed.inject(DataService);
  });

  it('should call isAuthenticated method of AuthService', () => {
    authServiceMock.isAuthenticated.and.returnValue(true);  // মক রিটার্ন ভ্যালু

    service.fetchData();  // সার্ভিসের মেথড কল

    expect(authServiceMock.isAuthenticated).toHaveBeenCalled();  // মক মেথড কল চেক করা
  });
});

এখানে, AuthService মক করা হয়েছে এবং আমরা পরীক্ষা করেছি যে isAuthenticated মেথডটি DataService থেকে ঠিকমতো কল হচ্ছে কিনা।

সার্ভিস টেস্টিংয়ের উপকারিতা

1. এনক্যাপসুলেশন: সার্ভিস টেস্টিংয়ের মাধ্যমে আপনি সার্ভিসের কার্যকারিতা পৃথকভাবে যাচাই করতে পারেন, যার ফলে অ্যাপ্লিকেশনের বাকি অংশগুলোতে প্রভাব পড়ে না।
2. ডিপেন্ডেন্সি মকিং: ডিপেন্ডেন্সিগুলির মকিং টেস্টে সাহায্য করে এবং এটি সার্ভিসের আচরণ সম্পূর্ণভাবে পরীক্ষা করতে সক্ষম করে।
3. রিফ্যাক্টরিং সহজ করা: সার্ভিসে পরিবর্তন বা রিফ্যাক্টরিং করার সময় টেস্টগুলি আপনাকে সঠিকতা নিশ্চিত করতে সাহায্য করে।

এইভাবে, Angular-এ ডিপেন্ডেন্সি ইনজেকশনের সাথে সার্ভিস টেস্টিং করা একটি শক্তিশালী উপায় হতে পারে যাতে অ্যাপ্লিকেশনের কার্যকারিতা এবং নির্ভরযোগ্যতা বজায় রাখা যায়।

Protractor হল Angular অ্যাপ্লিকেশনগুলির জন্য তৈরি একটি End-to-End (E2E) টেস্টিং ফ্রেমওয়ার্ক। এটি Angular অ্যাপ্লিকেশনের ইউজার ইন্টারফেস (UI) টেস্ট করতে ব্যবহৃত হয়, যেখানে বিভিন্ন ফিচার, পেজ ইন্টারঅ্যাকশন এবং ইউজার ইন্টারফেসের রেসপন্সনেস পরীক্ষা করা হয়। Protractor ব্যবহার করে, আপনি ব্রাউজারে অ্যাপ্লিকেশন চালু করতে পারেন, ইউজার ইন্টারঅ্যাকশন সিমুলেট করতে পারেন এবং অ্যাপ্লিকেশনের বিভিন্ন অংশের কার্যকারিতা পরীক্ষা করতে পারেন।

Protractor একটি ম্যাসিভ অ্যাসিনক্রোনাস অ্যাপ্লিকেশন হিসাবে কাজ করে, Angular স্পেসিফিক অ্যাসিনক্রোনাস টাস্কের সাথে ডিল করতে এটি বিশেষভাবে ডিজাইন করা হয়েছে। এটি WebDriverJS-এর উপরে ভিত্তি করে তৈরি, যা Selenium WebDriver এর জন্য JavaScript API।

Protractor ইন্সটলেশন

প্রথমে, আপনার প্রোজেক্টে Protractor ইন্সটল করা প্রয়োজন। Angular CLI-এ সাধারণত Protractor ইতিমধ্যেই অন্তর্ভুক্ত থাকে, তবে যদি আপনার প্রোজেক্টে এটি না থাকে, তাহলে আপনাকে নিজে থেকে ইনস্টল করতে হবে।

1. Protractor ইনস্টল করা

npm install protractor --save-dev

এছাড়া, Angular CLI প্রজেক্টে যদি End-to-End টেস্টিং সেটআপ না থাকে, তাহলে আপনি ng add কমান্ড ব্যবহার করে এটি যুক্ত করতে পারেন:

ng add @angular/e2e

এটি প্রোজেক্টে Protractor এবং প্রাসঙ্গিক কনফিগারেশন ফাইল যুক্ত করবে।

Protractor কনফিগারেশন

Protractor কনফিগারেশন ফাইল হল একটি .conf.js ফাইল যা টেস্টের জন্য ব্রাউজার, URL, এবং অন্যান্য সেটিংস কনফিগার করতে ব্যবহৃত হয়। এটি সাধারনত e2e/ ফোল্ডারে থাকে।

উদাহরণ কনফিগারেশন ফাইল (protractor.conf.js):

exports.config = {
  directConnect: true,  // Use the local WebDriver instead of the Selenium Server
  baseUrl: 'http://localhost:4200',  // অ্যাপ্লিকেশনের লোকাল URL
  framework: 'jasmine',  // Jasmine ফ্রেমওয়ার্ক ব্যবহার
  specs: ['./src/app/**/*.e2e-spec.ts'],  // টেস্ট স্পেসিফিকেশন ফাইলের পাথ
  capabilities: {
    browserName: 'chrome',  // ব্রাউজার হিসেবে Chrome ব্যবহার
  },
  jasmineNodeOpts: {
    showColors: true,  // টেস্ট রেজাল্টে রং দেখাবে
    defaultTimeoutInterval: 30000,  // টাইমআউট সময় 30 সেকেন্ড
  },
};

এটি এমন কনফিগারেশন যেখানে baseUrl সেট করা হয়েছে, যাতে localhost:4200-এ অ্যাপ্লিকেশন চালু করা যায়। এছাড়াও, টেস্টের জন্য Chrome ব্রাউজার ব্যবহার করা হচ্ছে।

Protractor টেস্ট লিখা

Protractor টেস্ট লেখার জন্য সাধারণত Jasmine বা Mocha ফ্রেমওয়ার্ক ব্যবহার করা হয়। Jasmine হল একটি জনপ্রিয় টেস্ট ফ্রেমওয়ার্ক যা প্রোঅ্যাকটর দ্বারা ডিফল্ট হিসেবে ব্যবহৃত হয়। আপনি describe, it, beforeEach, afterEach ইত্যাদি Jasmine ফাংশন ব্যবহার করে টেস্ট কেস লিখতে পারেন।

উদাহরণ: একটি সাধারন Protractor টেস্ট

ধরা যাক, আপনার অ্যাপ্লিকেশনের একটি ফর্মে ইউজার নাম ইনপুট করার ফিচার রয়েছে। এই ফিচারটি পরীক্ষা করার জন্য নিচের মত একটি টেস্ট লিখতে পারেন:

app.e2e-spec.ts:

import { browser, by, element } from 'protractor';

describe('My Angular App', () => {
  it('should display welcome message', async () => {
    await browser.get('/');  // অ্যাপ্লিকেশন হোমপেজে যান
    const message = await element(by.css('h1')).getText();  // h1 ট্যাগের টেক্সট নিন
    expect(message).toEqual('Welcome to my app!');  // আশা করা হচ্ছে যে টেক্সটটি 'Welcome to my app!' হবে
  });

  it('should accept input in the form', async () => {
    await browser.get('/form');  // ফর্ম পেজে যান
    const nameInput = element(by.css('input[name="username"]'));
    await nameInput.sendKeys('John Doe');  // ইউজারনেম ইনপুট ফিল্ডে 'John Doe' পাঠান
    const value = await nameInput.getAttribute('value');
    expect(value).toEqual('John Doe');  // নিশ্চিত করুন যে ইনপুটের মান 'John Doe' হয়েছে
  });
});

এখানে, browser.get('/'); কমান্ডটি অ্যাপ্লিকেশনের হোমপেজে চলে যাবে এবং সেখানে একটি টেস্ট করা হবে। expect() ফাংশনটি ব্যবহার করে আশা করা হচ্ছে যে h1 ট্যাগের টেক্সট হবে 'Welcome to my app!'।

টেস্ট চালানো

আপনার টেস্টগুলো চালানোর জন্য Angular CLI ব্যবহার করে ng e2e কমান্ড রান করতে হবে। এটি Protractor ব্যবহার করে আপনার End-to-End টেস্ট চালাবে।

ng e2e

এই কমান্ডটি টেস্ট চালাবে এবং আপনি যদি সফলভাবে টেস্ট পাস করেন তবে স্ক্রিনে সফলতার বার্তা দেখতে পাবেন।

Protractor-এর অন্যান্য সুবিধা

• ইন্টারঅ্যাকশন সিমুলেশন: Protractor ইউজার ইন্টারফেসের সাথে বিভিন্ন ধরনের ইন্টারঅ্যাকশন (যেমন, ক্লিক, টাইপ, সিলেক্ট ইত্যাদি) সিমুলেট করতে পারে।
• ডাইনামিক ওয়েব পেজ সাপোর্ট: Angular অ্যাপ্লিকেশনের জন্য বিশেষভাবে ডিজাইন করা হওয়ায়, এটি অ্যাসিনক্রোনাস অপারেশনের সাথে কাজ করতে খুব উপযোগী।
• ব্রাউজার সাপোর্ট: Protractor বিভিন্ন ব্রাউজারে (Chrome, Firefox, Safari) কাজ করতে পারে।

সারাংশ

Protractor একটি শক্তিশালী টুল যা Angular অ্যাপ্লিকেশনগুলির End-to-End টেস্টিং সহজ করে তোলে। এটি Angular-specific উপাদান ও আচরণ (যেমন, ডায়নামিক DOM আপডেট, অ্যাসিনক্রোনাস অপারেশন ইত্যাদি) সঠিকভাবে টেস্ট করার জন্য ডিজাইন করা হয়েছে। Protractor-এর মাধ্যমে আপনি UI টেস্ট, ইন্টারঅ্যাকশন এবং ইউজার ফ্লো পরীক্ষা করতে পারবেন, যা একটি অ্যাপ্লিকেশনের কার্যকারিতা এবং নির্ভরযোগ্যতা নিশ্চিত করতে সহায়তা করে।

Angular-এ ডিরেক্টিভ এবং পাইপ টেস্টিং গুরুত্বপূর্ণ, কারণ এগুলি অ্যাপ্লিকেশনের UI এবং ডেটা প্রদর্শন সংক্রান্ত কার্যকলাপ পরিচালনা করে। Angular Testing Framework (যেমন, Jasmine এবং Karma) ব্যবহার করে আপনি আপনার ডিরেক্টিভ এবং পাইপগুলোর সঠিকতা যাচাই করতে পারেন। ডিরেক্টিভ টেস্টিং মূলত তাদের কার্যকারিতা, DOM ম্যানিপুলেশন এবং ইউজার ইন্টারফেসের সাথে সম্পর্কিত হয়, এবং পাইপ টেস্টিং তাদের ডেটা ট্রান্সফরমেশন ফিচারগুলো যাচাই করতে সহায়ক।

ডিরেক্টিভ টেস্টিং

ডিরেক্টিভ একটি Angular ক্লাস যা DOM এলিমেন্টের আচরণ পরিবর্তন করতে ব্যবহৃত হয়। Angular Testing-এ, আপনি ডিরেক্টিভগুলোর কার্যকারিতা পরীক্ষা করতে পারেন যেমন কোন DOM পরিবর্তন ঘটছে কি না এবং সংশ্লিষ্ট UI রিফ্লেক্ট হচ্ছে কি না।

ডিরেক্টিভ টেস্টিং উদাহরণ

ধরা যাক, একটি সিম্পল HighlightDirective রয়েছে যা এলিমেন্টে হাইলাইট পরিবর্তন করে।

HighlightDirective (ডিরেক্টিভ):

import { Directive, ElementRef, Renderer2, HostListener } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  constructor(private el: ElementRef, private renderer: Renderer2) {}

  @HostListener('mouseenter') onMouseEnter() {
    this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'yellow');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.renderer.removeStyle(this.el.nativeElement, 'backgroundColor');
  }
}

এই ডিরেক্টিভ mouseenter ইভেন্টে এলিমেন্টের ব্যাকগ্রাউন্ড রং হলুদ করে এবং mouseleave ইভেন্টে রংটা মুছে ফেলে।

HighlightDirective Test (টেস্ট):

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { HighlightDirective } from './highlight.directive';
import { ElementRef, Renderer2 } from '@angular/core';
import { Component } from '@angular/core';

@Component({
  template: `<div appHighlight>Test Div</div>`
})
class TestComponent {}

describe('HighlightDirective', () => {
  let fixture: ComponentFixture<TestComponent>;
  let divElement: HTMLElement;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [HighlightDirective, TestComponent]
    });
    fixture = TestBed.createComponent(TestComponent);
    fixture.detectChanges();
    divElement = fixture.nativeElement.querySelector('div');
  });

  it('should highlight the element on mouse enter', () => {
    const event = new MouseEvent('mouseenter');
    divElement.dispatchEvent(event);
    fixture.detectChanges();
    expect(divElement.style.backgroundColor).toBe('yellow');
  });

  it('should remove highlight on mouse leave', () => {
    const event = new MouseEvent('mouseleave');
    divElement.dispatchEvent(event);
    fixture.detectChanges();
    expect(divElement.style.backgroundColor).toBe('');
  });
});

এই টেস্টে:

• TestComponent একটি সিম্পল কম্পোনেন্ট যা appHighlight ডিরেক্টিভ ব্যবহার করে।
• mouseenter এবং mouseleave ইভেন্ট ট্রিগার করে পরীক্ষিত হয়, এবং DOM এর স্টাইল পরীক্ষা করা হয়।

পাইপ টেস্টিং

Angular পাইপ ডেটার ফরম্যাটিং, ট্রান্সফরমেশন এবং প্রেজেন্টেশন জন্য ব্যবহৃত হয়। যেমন, DatePipe বা CurrencyPipe ডেটাকে একটি নির্দিষ্ট ফরম্যাটে কনভার্ট করতে ব্যবহার হয়। পাইপের টেস্টিং মূলত তাদের আউটপুট সঠিক কিনা এবং বিভিন্ন ইনপুট ভ্যালুতে কিভাবে আচরণ করে তা যাচাই করতে হয়।

পাইপ টেস্টিং উদাহরণ

ধরা যাক, একটি কাস্টম পাইপ তৈরি করা হয়েছে যেটি একটি স্ট্রিং এর প্রথম অক্ষর বড় (capitalize) করে।

CapitalizePipe (পাইপ):

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'capitalize'
})
export class CapitalizePipe implements PipeTransform {

  transform(value: string): string {
    if (!value) return value;
    return value.charAt(0).toUpperCase() + value.slice(1);
  }
}

এই পাইপ স্ট্রিংয়ের প্রথম অক্ষর বড় করে।

CapitalizePipe Test (টেস্ট):

import { CapitalizePipe } from './capitalize.pipe';

describe('CapitalizePipe', () => {
  let pipe: CapitalizePipe;

  beforeEach(() => {
    pipe = new CapitalizePipe();
  });

  it('create an instance', () => {
    expect(pipe).toBeTruthy();
  });

  it('should capitalize the first letter of a string', () => {
    expect(pipe.transform('angular')).toBe('Angular');
  });

  it('should not change a string if the first letter is already capitalized', () => {
    expect(pipe.transform('Angular')).toBe('Angular');
  });

  it('should return an empty string if the input is empty', () => {
    expect(pipe.transform('')).toBe('');
  });

  it('should return null if the input is null', () => {
    expect(pipe.transform(null)).toBeNull();
  });
});

এখানে, CapitalizePipe টেস্ট করা হয়েছে যা বিভিন্ন ইনপুট নিয়ে সঠিক আউটপুট প্রদান করছে কিনা তা যাচাই করা হয়।

উপসংহার

• ডিরেক্টিভ টেস্টিং: DOM ইন্টারঅ্যাকশন এবং স্টাইল পরিবর্তন পরীক্ষা করতে ব্যবহৃত হয়।
• পাইপ টেস্টিং: ডেটা ট্রান্সফরমেশন এবং আউটপুট যাচাই করতে ব্যবহৃত হয়।
• Angular-এ টেস্টিং করতে Jasmine এবং Karma ব্যবহৃত হয়, যা আপনাকে নিশ্চিত করতে সাহায্য করে যে আপনার ডিরেক্টিভ এবং পাইপগুলোর আচরণ সঠিকভাবে কাজ করছে।

Angular অ্যাপ্লিকেশনগুলিতে সার্ভারের সাথে ডেটা আদান-প্রদান করার জন্য HttpClient ব্যবহার করা হয়। তবে, প্রকৃত সার্ভার সংযোগের জন্য HTTP রিকোয়েস্ট করার আগে ডেভেলপমেন্ট বা টেস্টিং অবস্থায় HTTP রিকোয়েস্ট মকিং বা HTTP mocking খুবই গুরুত্বপূর্ণ। মকিংয়ের মাধ্যমে আপনি প্রকৃত সার্ভারে রিকোয়েস্ট না পাঠিয়ে শুধুমাত্র পরীক্ষামূলক ডেটা ব্যবহার করে অ্যাপ্লিকেশনটি টেস্ট করতে পারেন। Angular-এ HTTP রিকোয়েস্ট মক করতে প্রধানত HttpClientTestingModule এবং HttpTestingController ব্যবহৃত হয়।

HTTP মকিংয়ের উদ্দেশ্য

1. ডেভেলপমেন্ট সময় সার্ভার অনুপস্থিতি: যখন আপনি সার্ভার-সাইড ফিচারগুলি টেস্ট করতে চান কিন্তু সার্ভার অ্যাক্সেস না থাকে, তখন HTTP মকিং সাহায্য করে।
2. ইউনিট টেস্টিং: অ্যাপ্লিকেশন কোডের ইউনিট টেস্টিং করার জন্য HTTP রিকোয়েস্ট মক করা প্রয়োজন, যাতে সার্ভারের সাথে কনেকশন ছাড়া অ্যাপ্লিকেশনের লজিক টেস্ট করা যায়।
3. ডেটা রেসপন্স টেস্টিং: কখনও কখনও API রেসপন্স মক করতে হয় যাতে আপনি বিভিন্ন ধরনের রেসপন্স (যেমন: 200, 404, 500) টেস্ট করতে পারেন।

Angular-এ HTTP রিকোয়েস্ট মকিং

Angular-এ HTTP রিকোয়েস্ট মক করার জন্য আপনাকে HttpClientTestingModule এবং HttpTestingController ব্যবহার করতে হবে। এগুলি @angular/common/http/testing থেকে আমদানি করতে হবে।

1. HttpClientTestingModule কনফিগারেশন

প্রথমে, HttpClientTestingModule এবং HttpTestingController ইনস্টল করতে হবে:

1. আপনার টেস্ট ফাইলে মডিউল এবং কন্ট্রোলার আমদানি করুন:

import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { TestBed } from '@angular/core/testing';
import { HttpClient } from '@angular/common/http';
import { AppComponent } from './app.component';

2. TestBed কনফিগার করুন:

describe('AppComponent', () => {
  let httpClient: HttpClient;
  let httpTestingController: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      declarations: [AppComponent]
    });

    httpClient = TestBed.inject(HttpClient);
    httpTestingController = TestBed.inject(HttpTestingController);
  });

  afterEach(() => {
    httpTestingController.verify();  // HTTP কন্ট্রোলার ঠিকঠাক বন্ধ হচ্ছে কিনা তা নিশ্চিত করুন।
  });
});

2. HTTP রিকোয়েস্ট মকিং

এখন, HttpTestingController ব্যবহার করে HTTP রিকোয়েস্ট মক করা যেতে পারে।

উদাহরণ ১: GET রিকোয়েস্ট মকিং

ধরা যাক, আপনি একটি GET রিকোয়েস্ট মক করতে চান যা https://api.example.com/data URL থেকে ডেটা ফেচ করবে।

it('should return data for GET request', () => {
  const mockData = { name: 'John Doe', age: 30 };

  // HTTP GET রিকোয়েস্ট কল করুন
  httpClient.get('https://api.example.com/data').subscribe(data => {
    expect(data).toEqual(mockData);  // ডেটা যাচাই করুন
  });

  // HTTP রিকোয়েস্টটি মক করুন
  const req = httpTestingController.expectOne('https://api.example.com/data');
  expect(req.request.method).toEqual('GET');  // রিকোয়েস্ট মেথড চেক করুন
  req.flush(mockData);  // মকড রেসপন্স ফেরত পাঠান
});

এখানে:

• httpClient.get() মেথডটি HTTP GET রিকোয়েস্ট তৈরি করে।
• httpTestingController.expectOne() ব্যবহার করা হয়েছে রিকোয়েস্টটি মক করার জন্য এবং এটি শুধুমাত্র একটিমাত্র রিকোয়েস্টের জন্য অপেক্ষা করে।
• req.flush(mockData) মেথডের মাধ্যমে মক ডেটা ফেরত পাঠানো হয়েছে।

উদাহরণ ২: POST রিকোয়েস্ট মকিং

এখন, POST রিকোয়েস্ট মক করা যাক, যেখানে সার্ভারে কিছু ডেটা পাঠানো হবে।

it('should return data for POST request', () => {
  const postData = { name: 'Jane Doe', age: 28 };
  const mockResponse = { success: true };

  httpClient.post('https://api.example.com/user', postData).subscribe(response => {
    expect(response).toEqual(mockResponse);  // রেসপন্স যাচাই
  });

  const req = httpTestingController.expectOne('https://api.example.com/user');
  expect(req.request.method).toEqual('POST');  // রিকোয়েস্ট মেথড চেক করুন
  expect(req.request.body).toEqual(postData);  // পাঠানো ডেটা চেক করুন
  req.flush(mockResponse);  // মক রেসপন্স ফেরত পাঠান
});

এখানে:

• httpClient.post() মেথড ব্যবহার করে POST রিকোয়েস্ট তৈরি করা হয়েছে।
• req.request.body দিয়ে মক ডেটা যাচাই করা হয়েছে।
• req.flush(mockResponse) মাধ্যমে মক রেসপন্স দেওয়া হয়েছে।

3. Error Handling Test

আপনি যদি HTTP রিকোয়েস্টের জন্য ত্রুটি টেস্ট করতে চান, তাহলে req.flush() মেথডে ত্রুটি যুক্ত করতে পারেন।

it('should handle error response for GET request', () => {
  const mockError = { status: 404, statusText: 'Not Found' };

  httpClient.get('https://api.example.com/data').subscribe(
    data => fail('Expected an error, not data'),
    error => {
      expect(error.status).toEqual(404);
      expect(error.statusText).toEqual('Not Found');
    }
  );

  const req = httpTestingController.expectOne('https://api.example.com/data');
  req.flush('Error', mockError);  // ত্রুটি পাঠানো
});

এখানে:

• req.flush('Error', mockError) ব্যবহার করে ত্রুটির অবজেক্ট পাঠানো হয়েছে এবং টেস্ট করা হয়েছে কিভাবে ত্রুটি হ্যান্ডেল হয়।

সারাংশ

Angular অ্যাপ্লিকেশনে HTTP রিকোয়েস্ট মক করা একটি শক্তিশালী টুল যা ডেভেলপমেন্ট এবং টেস্টিং প্রক্রিয়া সহজ করে তোলে। HttpClientTestingModule এবং HttpTestingController ব্যবহার করে আপনি সহজেই HTTP রিকোয়েস্ট এবং রেসপন্স মক করতে পারেন, যা অ্যাপ্লিকেশনের লজিক টেস্ট করা এবং ডেভেলপমেন্টে সাহায্য করে।